<template>
  <div class="qz">
    <el-form :inline="true" :model="form">
      <el-form-item label="全宗名:">
        <el-input v-model="form.fondsName"
                  size="small"
                  placeholder="请输入"
                  @keyup.enter.native="queryFonds"></el-input>
      </el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 size="small"
                 style="margin-top: 3px"
                 @click="queryFonds"></el-button>
      <!--<el-checkbox label="已选" border size="medium" style="margin-left:30px" v-model="form.checked"
                   @change="queryFonds"></el-checkbox>-->
      <el-button type="primary"
                 style="float:right;margin-top: 3px"
                 size="small"
                 :loading="saveLoading"
                 @click="updateData">保存</el-button>
    </el-form>
    <avue-crud
      ref="crud"
      :option="option"
      :table-loading='qzLoading'
      :data="qzTableData"
      @selection-change="selectionChange"
      @on-load="onLoad"
    >
    </avue-crud>
  </div>
</template>

<script>
import { getQzAggregate } from '../../../../../api/quanzong/quanzong'
import { getRelationFondsNo, updateRelationFondsNo } from '../../../../../api/reference/reference'

export default {
  name: 'relationQuanzong', // 关联全宗
  props: {
    tableRowData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      form: {
        fondsName: ''
      },
      allData: [],
      qzLoading: true,
      saveLoading: false, // 保存loading
      qzTableData: [], // 全宗列表
      selectTale: [],
      firstSelectTable: [],
      option: {
        calcHeight: 70,
        addBtn: false,
        height: '510px',
        selection: true,
        tip: false,
        border: true,
        refreshBtn: false,
        columnBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: '全宗号',
            prop: 'fondsNo',
            width: 120,
            align: 'center'
          },
          {
            label: '全宗名',
            prop: 'fondsName'
          }
        ]
      }
    }
  },
  mounted () {
    this.getSelected()
  },
  watch: {
    tableRowData (v) {
      if (v.idCategory) {
        this.getSelected()
      }
    }
  },
  methods: {
    onLoad () {
      this.qzLoading = true
      getQzAggregate(this.form.fondsName).then(res => {
        this.qzTableData = res.data.data
        this.qzLoading = false
      }).catch(() => {
        this.qzLoading = false
      })
    },
    getSelected () {
      // 查询选中条目
      this.qzLoading = true
      this.$refs.crud.toggleSelection()
      const param = {
        idCategory: this.tableRowData.idCategory,
        idArchiveNoFmt: this.tableRowData.id
      }
      getRelationFondsNo(param).then(res => {
        const selectedData = []
        res.data.data.map(item => {
          this.qzTableData.map(items => {
            if (item === items.fondsNo) {
              selectedData.push(items)
            }
          })
        })
        this.$refs.crud.toggleSelection(selectedData)
        this.qzLoading = false
      }).catch(() => {
        this.qzLoading = false
      })
    },
    selectionChange (val) {
      this.selectTale = val
    },
    queryFonds () {
      // 搜索
      this.onLoad()
    },
    async updateData () {
      this.saveLoading = true
      const param = {
        idCategory: this.tableRowData.idCategory,
        idArchiveNoFmt: this.tableRowData.id,
        fondsNos: []
      }
      this.selectTale.map(item => {
        param.fondsNos.push(item.fondsNo)
      })
      await updateRelationFondsNo(param).then(() => {
        this.$message.success('关联成功!')
        this.$emit('handleSuccess')
      })
      this.saveLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .avue-crud__menu {
    display: none;
  }

  ::v-deep thead .cell {
    text-align: center;
  }
</style>
